<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位推荐 - 人才端</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { background:#f9f9f9; height:100vh; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
        .app-container { max-width:390px; height:100%; margin:0 auto; background:#fff; padding-bottom:80px; }
        .card-container { position:relative; height:520px; margin:0 16px; }
        .card { position:absolute; width:100%; height:100%; border-radius:20px; overflow:hidden; box-shadow:0 10px 20px rgba(0,0,0,.1); transition:transform .5s, opacity .5s; background:#fff; }
        .card-image { height:60%; background-size:cover; background-position:center; position:relative; }
        .card-image::after { content:''; position:absolute; left:0; right:0; bottom:0; height:80px; background:linear-gradient(to top, rgba(0,0,0,.6), transparent); }
        .card-content { padding:20px; }
        .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
        .card-name { font-size:20px; font-weight:600; }
        .card-stage { font-size:14px; color:#666; }
        .card-job { font-size:15px; color:#666; margin-bottom:8px; }
        .card-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
        .card-tag { padding:6px 12px; background:#f0f7ff; color:#1677ff; border-radius:20px; font-size:12px; }
        .card-bio { font-size:14px; color:#666; line-height:1.5; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
        .card-info-button { position:absolute; bottom:10px; right:50px; width:30px; height:30px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:#1677ff; box-shadow:0 2px 5px rgba(0,0,0,.2); z-index:5; }
        .card-location { position:absolute; bottom:15px; left:15px; color:#fff; font-size:14px; display:flex; align-items:center; z-index:5; }
        .card-share-button { position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:#22c55e; box-shadow:0 2px 5px rgba(0,0,0,.2); z-index:5; }
        .card-actions { display:flex; justify-content:space-around; padding:18px 0; }
        .card-button { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 5px 10px rgba(0,0,0,.1); border:1px solid #e5e7eb; background:#fff; }
        .swipe-indicator { position:absolute; top:50%; transform:translateY(-50%); padding:10px 20px; border-radius:5px; font-weight:bold; font-size:20px; z-index:10; opacity:0; transition:opacity .3s; }
        .swipe-indicator.like { right:20px; color:#52c41a; border:3px solid #52c41a; }
        .swipe-indicator.dislike { left:20px; color:#ff4d4f; border:3px solid #ff4d4f; }
        .bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:390px; display:flex; justify-content:space-around; padding:12px 0; background:#fff; border-top:1px solid #eee; }
        .bottom-nav a { display:flex; flex-direction:column; align-items:center; color:#666; font-size:12px; text-decoration:none; }
        .bottom-nav a i { font-size:20px; margin-bottom:4px; }
        .bottom-nav a.active { color:#1677ff; }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="py-4 px-4">
            <div class="flex justify-between items-center mb-4">
                <h1 class="text-xl font-bold">职位推荐</h1>
                <div class="flex items-center gap-2">
                    <button class="p-2 bg-gray-100 rounded-full"><i class="fas fa-sliders-h text-gray-600"></i></button>
                    <button class="p-2 bg-gray-100 rounded-full"><i class="fas fa-bell text-gray-600"></i></button>
                </div>
            </div>

            <div class="card-container">
                <div class="card" style="z-index:3;" id="c1">
                    <div class="card-image" style="background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=500&h=500&q=80');">
                        <div class="card-location"><i class="fas fa-map-marker-alt mr-1"></i>上海</div>
                        <button class="card-info-button" data-detail="company"><i class="fas fa-info"></i></button>
                        <button class="card-share-button" data-share="c1"><i class="fas fa-share-alt"></i></button>
                    </div>
                    <div class="card-content">
                        <div class="card-header"><div class="card-name">科技智联</div><div class="card-stage">B轮</div></div>
                        <div class="card-job">高级前端工程师 · 15k-30k</div>
                        <div class="card-tags"><span class="card-tag">React</span><span class="card-tag">微前端</span><span class="card-tag">SaaS</span></div>
                        <div class="card-bio">专注企业数字化转型，核心产品快速增长，欢迎热爱技术的你加入。</div>
                    </div>
                    <div class="swipe-indicator like">喜欢</div>
                    <div class="swipe-indicator dislike">不感兴趣</div>
                </div>
                <div class="card" style="z-index:2;" id="c2">
                    <div class="card-image" style="background-image:url('https://images.unsplash.com/photo-1560179707-f14e90ef3623?auto=format&fit=crop&w=500&h=500&q=80');">
                        <div class="card-location"><i class="fas fa-map-marker-alt mr-1"></i>北京</div>
                        <button class="card-info-button" data-detail="company"><i class="fas fa-info"></i></button>
                        <button class="card-share-button" data-share="c2"><i class="fas fa-share-alt"></i></button>
                    </div>
                    <div class="card-content">
                        <div class="card-header"><div class="card-name">未来科技</div><div class="card-stage">C轮</div></div>
                        <div class="card-job">全栈工程师 · 25k-45k</div>
                        <div class="card-tags"><span class="card-tag">Node.js</span><span class="card-tag">React</span><span class="card-tag">云原生</span></div>
                        <div class="card-bio">云原生与大数据方向领先团队，重视工程文化与人才成长。</div>
                    </div>
                    <div class="swipe-indicator like">喜欢</div>
                    <div class="swipe-indicator dislike">不感兴趣</div>
                </div>
            </div>

            <div class="card-actions">
                <button class="card-button" id="dislike-btn"><i class="fas fa-times text-red-500"></i></button>
                <button class="card-button" id="super-like-btn"><i class="fas fa-star text-green-500"></i></button>
                <button class="card-button" id="like-btn"><i class="fas fa-heart text-blue-600"></i></button>
            </div>
        </div>

        <div class="bottom-nav">
            <a href="card-matching-talent.html" class="active"><i class="fas fa-home"></i><span>首页</span></a>
            <a href="chat-list-talent.html"><i class="fas fa-comment"></i><span>消息</span></a>
            <a href="my.html"><i class="fas fa-user"></i><span>我的</span></a>
        </div>
    </div>

    <script>
        // 详情跳转
        document.querySelectorAll('.card-info-button').forEach(btn => {
            btn.addEventListener('click', () => { window.location.href = 'company-detail.html'; });
        });
        // 收藏（喜欢）入本地收藏列表
        const likeBtn = document.getElementById('like-btn');
        likeBtn.addEventListener('click', () => {
            const currentCard = document.querySelectorAll('.card')[0 + current];
            if (!currentCard) return;
            const title = currentCard.querySelector('.card-name')?.textContent || '';
            const job = currentCard.querySelector('.card-job')?.textContent || '';
            const saved = JSON.parse(localStorage.getItem('favorites') || '[]');
            saved.push({ title, job, savedAt: Date.now() });
            localStorage.setItem('favorites', JSON.stringify(saved));
            alert('已收藏到我的-收藏');
            swipe(currentCard, 'right');
        });
        // 分享海报（简单示例）
        document.querySelectorAll('.card-share-button').forEach(btn => {
            btn.addEventListener('click', () => {
                alert('已生成分享海报（示例）');
            });
        });

        // 滑动与按钮逻辑
        let current = 0; const cards = Array.from(document.querySelectorAll('.card'));
        const dislikeBtn = document.getElementById('dislike-btn');
        const superLikeBtn = document.getElementById('super-like-btn');
        function nextCard(){ current++; if (current >= cards.length) { alert('暂无更多职位'); } }
        function swipe(card, dir){ card.style.transform = dir==='right'? 'translateX(150%) rotate(20deg)': dir==='left'? 'translateX(-150%) rotate(-20deg)' : 'translateY(-150%) scale(.9)'; setTimeout(nextCard,300); }
        dislikeBtn.onclick = () => { if (current < cards.length) swipe(cards[current], 'left'); };
        superLikeBtn.onclick = () => { if (current < cards.length) swipe(cards[current], 'up'); };
    </script>
</body>
</html> 